import { View, Text, Button, Image } from "@tarojs/components"

import { Popup, Checkbox } from '@antmjs/vantui'
import { forwardRef, useState } from "react";
import Taro from "@tarojs/taro";

import checkedIcon from '@/assets/Images/checked.png'
import hasCheckedIcon from '@/assets/Images/has-checked.png'
import tipCheckedIcon from '@/assets/Images/tip-checked.png'

import { PAGE_PATH, RESPONSE_CODE, STORE_KEY } from "@/common/config";
import useInitAction from '@/hooks/useInitAction'

import useProfileInfoAction from "@/hooks/useProfileInfoAction";
import { IBindPhonePromise } from "@/typing";
import { handleGoKnow, handleLoginCallback, showToast } from "@/common/util";


interface IJoinLoginDialog {
    loginPopShow: boolean;
    phone: string;
    handleLoginPopStatus: (status) => void;

}
const JoinLoginDialog: React.FC<IJoinLoginDialog> = forwardRef((props, refs) => {
    const { bottomSafeHeight } = useInitAction();
    const { loginPopShow, phone } = props
    const { handleBindMobilePhoneAjax } = useProfileInfoAction()

    const [loginChecked, setLoginChecked] = useState(false)
    const [loginTipShow, setLoginTipShow] = useState(true)

    const handleClickLogin = () => {
        if (loginChecked) {
            setLoginTipShow(true)
            //执行登录逻辑

        } else {
            setLoginTipShow(false)
        }
    }
    const handleGoIndex = () => {
        Taro.reLaunch({
            url: PAGE_PATH.INDEX
        })
    }
    const handleBindPhone = async (phone) => {
        const phoneRes = await handleBindMobilePhoneAjax(phone) as IBindPhonePromise
        const { code, mobile, msg } = phoneRes
        if (code === RESPONSE_CODE.SUCCESS) {
            Taro.setStorageSync(STORE_KEY.PHONE, mobile)
            Taro.reLaunch({
                url: PAGE_PATH.INDEX
            })
            // handleLoginPopStatus(false)
        } else if (code === RESPONSE_CODE.LOGIN_EXPIRE || code === RESPONSE_CODE.LOGIN_NEED) {
            // Taro.setStorageSync(STORE_KEY.USER_ID, '')
            handleLoginCallback(() => handleBindPhone(phone));
            // Taro.removeStorageSync(STORE_KEY.PHONE)
            // await handleInitLogin().then(async () => {
            //     handleBindPhone(phone)  
            // })
        } else if (code === RESPONSE_CODE.ERROR) {
            throw new Error("请求异常");

        }
        else {
            showToast(msg)
        }
    }
    const handleGetPhoneNumber = async (e) => {


        const mobile = e.detail.code;
        if (mobile) {
            handleBindPhone(mobile)


        }



    }
    const handleCheckSet = (checkedStatus) => {
        if (checkedStatus) {
            setLoginTipShow(true)
        }

        setLoginChecked(checkedStatus)
    }
    const handleGoPrivacyPage = (pageEntry) => {
        Taro.navigateTo({
            url: `${PAGE_PATH.PRIVACY}?pageEntry=${pageEntry}`
        })
    }
   
   
    
    return (
        <Popup show={loginPopShow} position="bottom" closeOnClickOverlay={false} overlay={true} safeAreaInsetBottom={false} style={{ paddingBottom: bottomSafeHeight > 0 ? bottomSafeHeight + 'px' : '90rpx', borderTopRightRadius: '12px', borderTopLeftRadius: '12px' }}>
            <View className="pt-78px pl-40px pr-36px box-border flex flex-col items-center">
                <View className="text-#161618 text-48px font-bold">博主工作室</View>
                <View className="text-#161618 text-28px mt-32px"><div className="text-center">本产品只供与或计划与聊见平台合作的博主使用</div><div className="text-center">非平台合作博主不支持使用</div></View>


                {loginChecked ? <>
                    {phone ?
                        <View className="mt-46px bg-#8232E8 w-674px h-92px text-30px text-#fff font-medium flex items-center justify-center  " onClick={handleGoIndex}>注册/登录</View>
                        : <Button className="mt-46px bg-#8232E8 w-674px h-92px text-30px text-#fff font-medium flex items-center justify-center rounded-0 " openType="getPhoneNumber" onGetPhoneNumber={(e) => handleGetPhoneNumber(e)}>注册/登录</Button>}
                </> :
                    <View className="mt-46px bg-#8232E8 w-674px h-92px text-30px text-#fff font-medium flex items-center justify-center  " onClick={handleClickLogin}>注册/登录</View>}

                <View className="pl-4px mt-30px box-border flex items-center w-full">
                    <Checkbox
                        value={loginChecked}
                        onChange={(e) => handleCheckSet(e.detail)}
                        renderIcon={
                            <Image
                                style={{ width: '16px', height: '16px' }}
                                src={
                                    loginChecked
                                        ? hasCheckedIcon
                                        : checkedIcon
                                }
                            />
                        }
                    >

                    </Checkbox>
                    <Text className="mb-8px text-#161618 text-24px">我已阅读并同意<Text className='text-#5791EA' onClick={() => handleGoPrivacyPage('privacy')}>《隐私政策》</Text><Text className='text-#5791EA' onClick={() => handleGoPrivacyPage('service')}>《用户服务协议》</Text></Text>
                </View>
                {!loginTipShow && <View className="relative w-full">
                    <Image src={tipCheckedIcon} className="w-298px h-76px "></Image>
                    <Text className="absolute left-18px top-26px text-#fff text-26px">请阅读并勾选以上协议</Text>
                </View>}

                <View className="mt-54px w-full text-center text-#8232E8 text-24px" onClick={handleGoKnow}>看看平台能为你提供什么服务》</View>
            </View>
        </Popup>
    )

})
export default JoinLoginDialog;